<template>
    <el-form :model="formData" label-width="120px">
        <el-form-item label="顶 部 （ m ）">
            <el-input-number v-model="formData.top" class="mx-4" :min="0" controls-position="right" />
        </el-form-item>
        <el-form-item label="底 部（ m ）">
            <el-input-number v-model="formData.bottom" class="mx-4" :min="0" controls-position="right" />
        </el-form-item>
        <el-form-item label="重 量（ kg/m ）">
            <el-input-number v-model="formData.weight" class="mx-4" :min="0" controls-position="right" />
        </el-form-item>
        <el-form-item>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { onMounted, reactive ,toRefs, toRaw, watch} from 'vue'
import d3DrawStore from '@/store/modules/d3Draw'
import { initOpenHole } from "@/api/openHole"
import openHoleStore from '@/store/modules/openHoleDraw'
const d3Draw = d3DrawStore();
const openHoleDraw = openHoleStore();
const formData = ref(openHoleDraw.openHoleData)
// function drawHole(){
//     const $ = d3Draw.$;
//     const d3Canvas = d3Draw.d3Canvas;
//     if(openHoleDraw.value == null){
//     initOpenHole($,1760,60,d3Canvas);}
// }
// drawHole();
watch(() => [formData.top,formData.bottom], ([outerDiameter, top, bottom]) => {
    const $ = d3Draw.$;
    const d3Canvas = d3Draw.d3Canvas;
})

</script>